import React, { useState } from 'react';
import OSS from 'ali-oss';
import { OSS_CONFIG } from './ossConfig';

const client = new OSS(OSS_CONFIG);

// 定义一个上传组件
const UploadComponent = () => {
    // 定义一个状态变量，用于存储选择的文件
    const [file, setFile] = useState(null);

    // 处理文件选择事件
    const handleFileChange = (e) => {
        // 将选择的文件存储到状态变量中
        setFile(e.target.files[0]);
    };

    // 处理文件上传事件
    const handleUpload = async () => {
        // 如果没有选择文件，则提示用户选择文件
        if (!file) {
            alert('请先选择一个文件');
            return;
        }
        try {
            // 调用client的put方法上传文件
            const result = await client.put(file.name, file);
            // 打印上传结果
            console.log('上传成功:', result);
            // 提示用户上传成功
            alert('文件上传成功');
        } catch (error) {
            // 打印上传失败原因
            console.log('上传失败:', error);
            // 提示用户上传失败
            alert('文件上传失败');
        }

    };

    // 返回上传组件的界面
    return (
        <div>
            {/* 文件选择框 */}
            <input type="file" onChange={handleFileChange} />
            {/* 上传按钮 */}
            <button onClick={handleUpload}>上传文件</button>
        </div>
    );
};

export default UploadComponent;